<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-content">
						<form class="form-horizontal m-t" id="signupForm">
							<div class="form-group">
								<label class="col-sm-3 control-label">标题：</label>
								<div class="col-sm-8">
									<input id="title" name="title" class="form-control" type="text">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">作者：</label>
								<div class="col-sm-8">
									<input id="author" name="author" class="form-control" type="text">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">状态：</label>
								<div class="col-sm-8">
									<select id="status" name="status"  class="form-control valid" style="width: 100%" >
										<option value="0" selected="selected">正常</option>
										<option value="1" >废弃</option>
									</select>
								</div>
							</div>
							<style>
								#btnUpload{
									margin-top: 6px;
								}
								.layui-upload-file {
									display: none!important;
									opacity: .01;
									filter: Alpha(opacity=1);
								}
							</style>
							<div class="form-group">
								<label class="col-sm-3 control-label">封面图片：</label>
								<div class="col-sm-8">
									<img id="imgLogo" src="" style="width:100px;display:block;">
									<input type="hidden" id="img" name="img">
									<input type="hidden" id="sysimg" name="sysimg">
									<button type="button" class="btn btn-success" id="btnUpload">
										<i class="fa fa-cloud"></i>上传文件
									</button>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">简短描述：</label>
								<div class="col-sm-8">
									<textarea id="description" name="description" class="form-control" rows="5"></textarea>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">内容：</label>
								<div class="col-sm-8">
									<textarea id="content" name="content" class="form-control summernote" rows="5"></textarea>
								</div>
							</div>
							<!--<div class="form-group">
								<label class="col-sm-3 control-label">创建时间：</label>
								<div class="col-sm-8">
	                                									<input id="createtime" name="createtime" class="form-control" type="text">
																	</div>
							</div>-->

							<!--<div class="form-group">
								<label class="col-sm-3 control-label">小图片：</label>
								<div class="col-sm-8">
	                                									<input id="sysimg" name="sysimg" class="form-control" type="text">
																	</div>
							</div>-->

							<div class="form-group">
								<div class="col-sm-8 col-sm-offset-3">
									<button type="submit" class="btn btn-primary">提交</button>
									<button type="button" class="btn closeBtn" onclick="myClose();">关闭</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
	</div>
	</div>
	<div th:include="include::footer"></div>
	<!--<script src="//s.xlongwei.com/res/js/My97DatePicker/WdatePicker.js"></script>-->
	<script type="text/javascript" src="/js/appjs/hnzk/example/add.js"></script>
	<!--上传按钮需要的JS-->
	<script src="/js/layui.js"></script>
	<script type="text/javascript">

		function myClose(){
			var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
			parent.layer.close(index); //再执行关闭

		}

		$(document).ready(function() {
			$('.summernote').summernote({
				lang: 'zh-CN',
				height: 300,
				//tabsize: 3,
				toolbar: [
					// [groupName, [list of button]]
					['style', ['bold', 'italic', 'underline', 'clear']],
					['font', ['strikethrough', 'superscript', 'subscript']],
					['fontsize', ['fontsize']],
					['color', ['color']],
					['insert', ['link', 'picture', 'table']],
					['view', ['fullscreen', 'codeview', 'help']],
					['para', ['ul', 'ol', 'paragraph']],
					['height', ['height']]

				],
				lang: 'zh-CN',
				callbacks:{
					onImageUpload: function (files) {
						//上传图片到服务器
						var files_length = files.length;
						//此处循环上传每一个图片
						for(var i=0;i<files_length;i++){
							sendFile(files[i]);
						}

					},
					onMediaDelete: function (target) {
						//var imgSrc = target[0].currentSrc;
						//console.info(imgSrc);
						//console.info(target);
						var fileId = target[0].dataset.filename;
						console.info(fileId);
						var data = new FormData();
						data.append("fileId", fileId);
						$.ajax({
							data: data,
							type: "POST",
							url: "/hnzk/file/deleteImg",
							cache: false,
							contentType: false,
							processData: false,
							dataType : "json",
							success: function (data) {
								console.log(data);
								if(data.status == 200){
									alert("移除图片成功")
								}
							}
						});
						alert("移除图片")
					}
				}

			});
		});
		//上传图片
		function sendFile(file){
			var formdata = new FormData();
			//var fileName = file['name'];
			formdata.append("file", file);
			$.ajax({
				//图片上传出来的url，返回的是图片上传后的路径，http格式
				url : "/hnzk/file/add",
				type : "POST",
				data : formdata,
				cache : false,
				contentType : false,
				processData : false,
				dataType : "json",
				success: function(result) {
					//url:图片路径 filename：图片名称
					$('.summernote').summernote('insertImage', result.data.path,result.data.fileid);
				},
				error:function(){
					alert("上传失败");
				}
			});
		}
		//上传按钮实例化
		layui.use('upload', function () {
			var upload = layui.upload;
			//执行实例
			var uploadInst = upload.render({
				elem: '#btnUpload', //绑定元素
				url: '/hnzk/file/addExmapleFmImg', //上传接口
				done: function (r) {
					$("#imgLogo").attr("src", r.data.imgPath);
					$("#img").val(r.data.imgPath);
					$("#sysimg").val(r.data.sysPath)
				},
				error: function (r) {
					layer.msg(r.msg);
				}
			});
		});
	</script>
</body>
</html>
